<template>
	<view>
		<!-- 头部轮播部分 -->
		<view class="swiper">
			<swiper class="swiper" autoplay="autoplay" indicator-dots circular>
				<swiper-item v-for="(item,index) in swipers" :key="index">
					<image :src='item.img' mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 中间导航部位 -->
		<view class="navigation">
			<view class="" @click="chaoshi">
				<view class="iconfont icon-ziyuan"></view>
				<text>顽石超市</text>
			</view>
			<view class="" @click="lianxi">
				<view class="iconfont icon-guanyuwomen"></view>
				<text>联系我们</text>
			</view>
			<view class="" @click="shequ">
				<view class="iconfont icon-tupian"></view>
				<text>社区图片</text>
			</view>
			<view class="" @click="xuexi">
				<view class="iconfont icon-shipin"></view>
				<text>学习视频</text>
			</view>
		</view>
		<!-- 推荐商品 -->
		<view class="tuijianshangpin">
			<view class="pin">
				<text>推</text>
				<text>荐</text>
				<text>商</text>
				<text>品</text>
			</view>
		</view>
		<!-- 获取商品列表 -->
		<view class="liebiao">
			<view @click="tiaozhuan(item)" v-for="item in dataList" :key="item.id">
				<view class="siding">
					<view class="imgg">
						<image src='../../static/static/images/demo01/t2.jpg' mode=""></image>
					</view>
					<view class="suoyou">
						<view class="">
							<text class="xian">￥{{item.sell_price}}</text>
							<text class="yuan">￥{{item.market_price}}</text>
						</view>
						<text class="neirong">{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swipers: [],
				dataList: [],
				pageindex: 1
			}
		},
		onLoad() {
			this.getSwipers()
			this.getDataList()
		},
		methods: {
			// 点击跳转每一项
			tiaozhuan(item) {
				uni.navigateTo({
					url: "../tiaoshouji/tiaoshouji?id=" + item.id
				})
				console.log(item)
			},
			// 点击跳转顽石超市
			chaoshi() {
				uni.navigateTo({
					url: "../ChaoShi/ChaoShi"
				})
			},
			// 点击跳转联系我们
			lianxi() {
				uni.navigateTo({
					url: "../LianXiWoMen/LianXiWoMen"
				})
			},
			// 点击跳转社区图片
			shequ() {
				uni.navigateTo({
					url: "../SheQuTuPian/SheQuTuPian"
				})
			},
			// 点击跳转学习视频
			xuexi() {
				uni.navigateTo({
					url: "../XueXiShiPin/XueXiShiPin"
				})
			},

			// 获取swiper轮播部分
			async getSwipers() {
				const data = await uni.$Http.get('getlunbo')
				// console.log(data)
				this.swipers = data.message
			},
			// 获取商品列表
			async getDataList() {
				const data = await uni.$Http.get(`getgoods?${this.pageindex}`)
				console.log(data)
				this.dataList = data.message
			}
		}
	}
</script>

<style>
	/* swiper 部分样式 */
	.suoyou {
		width: 200rpx;
	}

	.liebiao {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		background-color: #EEEEEE;
		justify-content: space-around;
	}

	.imgg image {
		width: 100%;
		height: 400rpx;
	}

	.imgg {
		width: 100%;
		height: 400rpx;
	}

	.xian {
		color: #ff6700;
		font-size: 40rpx;
	}

	.yuan {
		text-decoration: line-through;
		color: #ccc;
	}

	.siding {
		width: 350rpx;
		height: 600rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		background-color: #FEFEFE;
	}

	.neirong {
		font-size: 20rpx;
	}

	.iconfont {
		font-size: 50rpx;
		width: 57px;
		height: 57px;
		line-height: 57px;
		text-align: center;
		background-color: brown;
		border-radius: 50px;
		color: #FFFFFF;
	}

	.navigation {
		margin-top: 25rpx;
		display: flex;
		justify-content: space-around;
	}

	.tuijianshangpin {
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		margin-left: -50rpx;
		font-size: 40rpx;
		color: #733A36;
		font-weight: bold;
		background-color: rgb(255, 255, 255);
	}

	.pin text {
		margin-left: 100rpx;
	}


	/* 轮播 部分样式*/
	.swiper {
		width: 100%;
	}

	swiper-item image {
		width: 100%;
	}
</style>
